import { Button, Form, FormInstance } from "@arco-design/web-react"
import { useCallback, useEffect, useState } from "react";
import { CommonOptionsType, FormSelect } from "../../../../../../common/components/FormSelect";
import { ConversationInfoItem } from "../../../../../../common/types/conversation";

import './index.css'

const FormItem = Form.Item;

export interface ConversationConfigForm {
  staffId: number;
}

interface ConfigFormProps {
  currentConversation: ConversationInfoItem;
  selectOptions: Array<CommonOptionsType>;

  handleSubmit: (values: ConversationConfigForm) => void;
}

export const ConfigForm = (props: ConfigFormProps) => {

  const { currentConversation, selectOptions, handleSubmit } = props;

  const [form] = Form.useForm<ConversationConfigForm>();

  useEffect(() => {
    form.setFieldValue("staffId", currentConversation.staff_id); // 手动修改
  }, [currentConversation]);

  return (
    <Form<ConversationConfigForm> key={`conversation_config_${currentConversation?.conversation_id}`} onSubmit={handleSubmit} form={form}>
      <FormItem<ConversationConfigForm> style={{ width: '80%', height: '40%' }} required field="staffId" label='客服名'>
        <FormSelect defaultValue={currentConversation.staff_id} options={selectOptions} />
      </FormItem>
      <div className='conversation-config-submit-btn'>
        <Button onClick={() => { form.submit() }} style={{ width: '20%' }} type='primary'>分配工单</Button>
      </div>
    </Form>
  )
}